<template>
  <div class="app-container">
    <div :class="'van-after-border '+item.class">
      <van-field name="esign" :label="item.label">
        <template #input>
          <van-image v-if="resultImg!=''" width="4rem" height="1.5rem" fit="contain" :src="resultImg" @click="showEsign" />
          <div v-else class="esign-card" @click="showEsign">
            <p>点击签名</p>
          </div>
        </template>
      </van-field>
    </div>
    <van-popup ref="dlgesign" v-model="showPop" style="width:100%;height: 100%">
      <div class="esign-main">
        <van-nav-bar title="绘制个人签名" left-text="" left-arrow @click-left="onClickLeft" />
        <div class="esign">
          <div class="esign-box">
            <vue-esign ref="esign" class="esignature" :width="height" :height="width" :is-crop="isCrop" :line-width="lineWidth" :line-color="lineColor" :bg-color.sync="bgColor" />
          </div>
        </div>
        <div class="esigh-btns">
          <button class="button-clear" @click="handleReset">
            清除重写
          </button>
          <button class="button-agree" @click="handleGenerate">
            提交签字
          </button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import EleBase from './EleBase'
import vueEsign from '@/components/esign/index'

export default {
  name: 'EleEsign',
  components: { vueEsign },
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data () {
    return {
      signWin: {
        width: 0,
        height: 0
      },
      width: 800, // 强制横屏，将
      height: 300,
      isFullFlag: false,
      showPop: false,
      lineWidth: 8,
      lineColor: '#000000',
      bgColor: '#fafafa',
      fontSize: 0,
      resultImg: this.item.value || '',
      isCrop: false,
      sratio: 90,
      uploader: [],
      uploadUrl: 'api/Files/Upload',
      deleteUrl: 'api/Files/DelFile',
      headers: {
        // token: this.$store.state.account.token
      }
    }
  },
  mounted() {
    this.signWin.width = document.documentElement.clientWidth
    this.signWin.height = document.documentElement.clientHeight
    this.width = this.signWin.width - 100
    this.height = this.signWin.height

    console.log('width=' + this.width)
    console.log('height=' + this.height)
    // 监听窗口大小改变，this.isScreenFull的值为是否全屏，若是则true，反之false
    window.onresize = () => {
      this.isScreenFull = document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement
    }
  },
  beforeMount () {
    // window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy () {
    // window.removeEventListener('resize', this.$_resizeHandler)
  },
  methods: {
    // 全屏事件
    handleFullS(isFull) {
      var element = document.documentElement
      // 判断是否已经是全屏
      // 如果是全屏，退出
      debugger
      if (!isFull) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
        console.log('已还原！')
      } else { // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
        console.log('已全屏！')
      }
      // 改变当前全屏状态
      // this.fullscreen = !this.fullscreen
    },
    // 进入全屏
    fullScreenHandle() {
      try {
        var element = document.documentElement
        if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        } else if (element.mozRequestFullscreen) {
          element.mozRequestFullscreen()
        } else if (element.requestFullscreen) {
          element.requestFullscreen()
        }
      } catch (e) {
        alert(e)
      }
    },
    // 退出全屏
    exitFullscreenHandle() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
    showEsign() {
      this.showPop = true
    },
    onClickLeft() {
      this.showPop = false
      this.handleReset()
    },
    handleReset () {
      this.$refs.esign.reset()
    },
    handleGenerate () {
      this.$refs.esign.generate().then(res => {
        this.resultImg = res
        this.showPop = false
        this.item.value = res
      }).catch(err => {
        alert(err)
      })
    }
  }
}
</script>

<style scoped>
@media screen and (orientation: portrait) {
    .esign-main {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      width : calc(100vh);
      height : calc(100vh);
      /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/
      overflow: hidden;
      transform-origin: 50% 50%;
    }
}

@media screen and (orientation: landscape) {

  .esign-main {
    text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    }
    .esign-main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        transform-origin: top left;
    }
    .van-nav-bar {
      box-shadow: 0rem 0rem 0rem #ddd;
    }
}

.esign-card {
    padding: 10px 35px;
    color: #ddd;
    border: 1px dashed transparent;
    background: linear-gradient(#fff,#fff) padding-box,
      repeating-linear-gradient(-45deg,#ddd 0, #ddd 0.3em, #fff 0,#fff 0.6em);
      /* 0.3em设置虚线点的宽度或长度；0.6em设置虚线点的间距 */
}
.esign {
  max-width: 1000px;
  margin: auto;
  padding: 5px;
}
.esigh-btns {
  height: 45px;
  width:  100%;
  background: #fff;
  padding: 2px;
  text-align: center;
}

.esigh-btns button{
  height: 25px;
  width: 80px;
  font-size: 12px;
  margin-right: 10px;
  outline: none;
  border-radius: 4px;
  border: 1px solid transparent;
}

.button-clear {
  background: #fff;
  color: #000;
  border: 1px solid #ddd;
}
.button-agree {
  color: #fff;
  background: rgb(0, 187, 255);
}

.button-agree:active {
  color:#000;
  box-shadow: 0px 0px 50px #fff inset;
}
.esigh-btns button:active{
  color:#000;
  box-shadow: 0px 0px 50px rgb(0, 187, 255) inset;
}
.esigh-result {
  margin-top: 5px;
}
.esigh-result img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ececee;
}
.esignature {
  margin: 0;
 /* border: 1px solid #ccc;
   width: 100% !important;
  height: 100% !important; */
}
</style>
